<template>
  <div
    :class="`
    bg-gradient-to-r from-[#e0e7ff] to-[#ede9fe] 
    border-[2px] border-[#8b5cf6] 
    rounded-lg p-4 
    relative 
    transition-all duration-300 
    hover:shadow-lg hover:border-[#7c3aed]
    hover:bg-gradient-to-r hover:from-[#d1d9ff] hover:to-[#ede9fe]
    cursor-pointer 
    summaryCardAnimation
    shadow-[0_4px_12px_rgba(79,70,229,0.15),0_2px_6px_rgba(79,70,229,0.1)]
    my-2
  `"
    @click="onClickHandler"
  >
    <div class="flex items-center mb-2.5">
      <div
        class="w-8 h-8 rounded-md flex items-center justify-center mr-2.5 shadow-sm relative overflow-hidden"
        :style="{
          background: 'linear-gradient(135deg, #8b5cf6 0%, #4f46e5 100%)',
          color: 'white',
        }"
      >
        <div v-html="icon"></div>
      </div>
      <div>
        <div class="text-base font-bold text-indigo-700">汇总结果</div>
      </div>
    </div>
    <!-- 内容 -->
    <div
      class="rounded-md overflow-hidden relative"
      :style="{
        background: 'rgba(255, 255, 255, 0.8)',
        boxShadow: 'inset 0 1px 4px rgba(79,70,229,0.15)',
        padding: '12px',
        border: '1px solid rgba(139,92,246,0.3)',
      }"
    >
      <div class="text-sm font-medium text-gray-700">
        已为您找到
        <span class="text-indigo-600 font-bold mx-1 text-lg">{{ summary?.length || 0 }}</span>
        条修改建议
      </div>
      <div class="mt-2 text-xs text-indigo-500">点击查看详细内容</div>
      <div class="absolute top-0 right-0 w-20 h-20">
        <div
          class="absolute transform rotate-45 text-white text-[10px] font-medium py-1 right-[-30px] top-[10px] w-[100px] text-center"
          :style="{
            backgroundColor: '#4f46e5',
            opacity: 0.85,
          }"
        >
          汇总报告
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  summary: {
    type: Array,
    required: true,
  },
});
const icon = `<svg
    xmlns="http://www.w3.org/2000/svg"
    width="20"
    height="20"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <line x1="8" y1="6" x2="21" y2="6"></line>
    <line x1="8" y1="12" x2="21" y2="12"></line>
    <line x1="8" y1="18" x2="21" y2="18"></line>
    <line x1="3" y1="6" x2="3.01" y2="6"></line>
    <line x1="3" y1="12" x2="3.01" y2="12"></line>
    <line x1="3" y1="18" x2="3.01" y2="18"></line>
  </svg>`;

const onClickHandler = () => {};
</script>

<style lang="scss" scoped></style>
